import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import vuexPersist from "vuex-persist";

export default new Vuex.Store({
  state: {
    msg: "这是 vuex 里的数据msg",
    num: 0,
    list: [
      {
        title: "任务1",
        status: 0,
      },
      {
        title: "任务2",
        status: 1,
      },
      {
        title: "任务3",
        status: 0,
      },
    ],
  },
  mutations: {
    change(state, val) {
      state.num += val;
    },
    //mutation的第一个参数永远都是state
    add(state, title) {
      state.list.push({ title: title, status: 0 });
    },
    //todolist的添加
    remove(state, index) {
      state.list.splice(index, 1);
    },
    changes() {},
  },
  getters: {},
  actions: {},
  modules: {},
  plugins: [
    new vuexPersist({
      storage: window.localStorage,
    }).plugin,
  ],
  // plugin是插件的意思 我们在这里实例化一个vuex-persist，规定我们的state数据存在本地存储中
});

//store是仓库的意思

// state 是状态的意思 要管理的数据放在这里 就相当于是data
// mutations 是修改state的地方 就相当于是methods 而且只有mutation才有权利修改state
// getters  相当于是我们之前学的计算属性
//actions 在vuex中执行异步操作的地方
// modules 是模块的意思  当state比较多的时候可以分模块管理
